<template>
  <el-card>
    <el-row>
      <el-form :model="state" :inline="true">
        <el-form-item label="字典名称" prop="dictName">
          <el-input v-model="state.dictName" placeholder="请输入字典名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="字典编码" prop="dictCode">
          <el-input v-model="state.dictCode" placeholder="请输入字典编码" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="getDictListFun">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row class="searchDiv">
      <el-button v-if="hasPer('dict:add')" type="primary" icon="Plus" @click="editDictFun">新增</el-button>
    </el-row>
    <el-table :data="state.tableData" row-key="id" :border="true">
      <el-table-column label="字典名称" prop="dictName" align="center"></el-table-column>
      <el-table-column label="字典编码" prop="dictCode" align="center"></el-table-column>
      <el-table-column label="描述" prop="description" align="center"></el-table-column>
      <el-table-column label="字典状态" prop="enable" align="center" width="100">
        <template #default="scope">
          <el-tag v-if="scope.row.enabled == 1" type="success">启用</el-tag>
          <el-tag v-else type="danger">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
      <el-table-column label="操作" prop="option" width="240px" align="center">
        <template #default="scope">
          <el-button v-if="hasPer('dict:enabled')" :type="buttonType(scope.row.enabled)"
                      @click="enableDictFun(JSON.parse(JSON.stringify(scope.row)))">
            {{scope.row.enabled == 1 ? '停用' : '启用'}}</el-button>
          <el-button v-if="hasPer('dict:edit')" type="primary" @click="editDictFun(JSON.parse(JSON.stringify(scope.row)))">编辑</el-button>
          <el-button v-if="hasPer('dict:del')" type="danger" @click="deleteDict(scope.row.dictId, scope.row.dictName)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <pagination v-model:current="state.current" v-model:size="state.size" v-model:total="state.total" @get-list="getDictListFun"></pagination>
  </el-card>
  <!--编辑-->
  <edit-dict v-model:dialog-visible="dialogVisible" :dict-obj="state.dictObj" @get-list="getDictListFun"></edit-dict>
</template>

<script setup>
import editDict from "./editDict";
import Pagination from "../../components/Pagination";
import {getDictList, delDict, enabledDict} from "../../api/dict/sysDict";
import {errorMsg, infoMsg, successMsg} from "../../utils/message";
import {hasPer, parseTime} from "../../utils/common";
import {onMounted, reactive, ref} from "vue";
import {ElMessageBox} from "element-plus";

const state = reactive({
  dictName: '',
  dictCode: '',
  tableData: [],
  dictObj: {},
  current: 1,
  size: 10,
  total: 0
})

const dialogVisible = ref(false)

onMounted(() => {
  getDictListFun()
})

//  字典列表
const getDictListFun = () => {
  const params = {
    dictName: state.dictName,
    dictCode: state.dictCode,
    size: state.size,
    currentPage: state.current
  }
  getDictList(params).then(res => {
    if (res.code == 200){
      state.tableData = res.data.records
      state.total = res.data.total
    }else{
      errorMsg(res.message)
    }
  })
}

//  添加、编辑字典
const editDictFun = (row) => {
  dialogVisible.value = true
  state.dictObj = row.dictId ? row : {}
}

//  删除字典
const deleteDict = (id, dictName) => {
  ElMessageBox.confirm('确定删除【' + dictName + '】？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    delDict({dictId: id}).then(res => {
      if (res.code == 200){
        successMsg(res.message)
        getDictListFun()
      } else {
        errorMsg(res.message)
      }
    })
  }).catch(() => {
    infoMsg('操作已取消')
  })
}

//  启用/停用
const enableDictFun = (row) => {
  const enabled = row.enabled == 0?true:false
  const str = enabled ? '启用' : '停用'
  const color = enabled ? '#67C23A' : '#F56C6C'
  ElMessageBox.confirm('确定<span style="color: '+color+'">' + str + '</span>【' + row.dictName + '】？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    dangerouslyUseHTMLString: true
  }).then(() => {
    enabledDict({dictId: row.dictId,enabled: row.enabled == 0?1:0}).then(res => {
      if (res.code == 200){
        successMsg(res.message)
        getDictListFun()
      } else {
        errorMsg(res.message)
      }
    })
  }).catch(() => {
    infoMsg('操作已取消')
  })
}

const buttonType = (type) => {
  if (type == 1){
    return 'warning'
  } else {
    return 'success'
  }
}
</script>

<style scoped>

</style>